﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Sortable.aspx.cs" Inherits="JQueryWidget.JQueryWeb.IGoogleHomePage1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <style type="text/css">
    .widgetStore
    {
    }
    .column
    {
        margin:0px 0px 0px 0px;
        width:33%;
        display:block;
        float:left;
        position:relative; 
        height:800px;
    }
    .modbox
    {
        margin:0px 0px 0px 0px;
    }
    .widget
    { 
        border:1px solid gray;
        margin-top:10px;
    }
    .widget_header
    {
        background-color:lightblue;
        height:20px;
    }
    .widget_body
    {
    }
    .widget_footer
    {
    }
    
    .draggable
    {
    }
    .droppable
    {
    }
    .widgetholder
    {
        border:2px dashed gray;
        display:none;
        position:relative;
        margin-top:10px;
    }
    .widgetholder1
    {
        border:2px dashed gray; 
        position:relative;
        margin-top:10px;
        height:40px;
    }
    </style>
    <script type="text/javascript" language="javascript" src="Scripts/jquery-1.4.1.min.js"></script>
    <script type="text/javascript" language="javascript" src="Scripts/jquery-ui.min.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <div class="widgetStore">
        <div class="column droppable" id="s1">
            <div class="widget draggable">
                <div class="widget_header">
                    Calendar
                </div>
                <div class="widget_body">
                    Calendar 1
                </div>
                <div class="widget_footer">
                </div>
            </div> 
            
            <div class="widget draggable">
                <div class="widget_header">
                    News
                </div>
                <div class="widget_body">
                    <a href="#">a good new from US.</a>
                </div>
                <div class="widget_footer">
                </div>
            </div>
             
        </div>
        <div class="column droppable" id="s2">
            <div class="widget draggable">
                <div class="widget_header">
                    Calendar2
                </div>
                <div class="widget_body">
                    Calendar 2
                </div>
                <div class="widget_footer">
                </div>
            </div> 
            
            <div class="widget draggable">
                <div class="widget_header">
                    News2
                </div>
                <div class="widget_body">
                    <a href="#">a good new from US.</a>
                </div>
                <div class="widget_footer">
                </div>
            </div>
             
        </div>
        <div class="column droppable">
         
        </div>
    </div> 
    <script type="text/javascript" language="javascript">
        $(document).ready(function () {
            $(".droppable").sortable({
                placeholder: "widgetholder1",
                connectWith: ".droppable",
                helper: "clone",
                receive: function (event, ui) {
                },
                sort: function (event, ui) {
                },
                start: function (event, ui) {
                    $("<div>asdfasdfasdf</div>").appendTo(".widgetholder1");
                }
            }
            );
            //            $("#s2").sortable({
            //                placeholder: "widgetholder1" ,
            //                connectWith: "#s1"});

        });
    </script> 
    </form>
</body>
</html>
